<template>
  <!-- 罐区管理 -->
  <div class="Project-box tankAreaManagement-box">
    <div class="tankManagTit1 publicTiTle">罐区管理</div>
    <div class="tankManagTit2 publicETiTle">水质参数</div>
    <div class="tankManagTit3 publicTiTle">灌溉控制</div>
    <div class="tankManag-Box1">
      <div class="Box1Item">
        <div class="Box1Item1">灌溉记录</div>
        <div class="Box1Item2">
          次数:
          <span>20次</span>
        </div>
        <div class="Box1Item3">
          时长:
          <span>30min</span>
        </div>
      </div>
      <div class="Box1Item">
        <div class="Box1Item1">进排液时间</div>
        <div class="Box1Item2">
          进液:
          <span>11:20</span>
        </div>
        <div class="Box1Item3">
          排液:
          <span>18:30</span>
        </div>
      </div>
      <div class="Box1Item">
        <div class="Box1Item1">进排液PH</div>
        <div class="Box1Item2">
          进液:
          <span>7.2</span>
        </div>
        <div class="Box1Item3">
          排液:
          <span>6.8</span>
        </div>
      </div>
      <div class="Box1Item">
        <div class="Box1Item1">Ec监测</div>
        <div class="Box1Item2">
          进液:
          <span>0.8</span>
        </div>
        <div class="Box1Item3">
          排液:
          <span>0.6</span>
        </div>
      </div>
    </div>
    <div class="tankManag-Box2">
      <div class="Box2Item">
        <div class="Box2ItemL">浊度</div>
        <div class="Box2ItemR">000</div>
      </div>
      <div class="Box2Item">
        <div class="Box2ItemL">溶解氧</div>
        <div class="Box2ItemR">000</div>
      </div>
      <div class="Box2Item">
        <div class="Box2ItemL">PH值</div>
        <div class="Box2ItemR">000</div>
      </div>
      <div class="Box2Item">
        <div class="Box2ItemL">COD</div>
        <div class="Box2ItemR">000</div>
      </div>
    </div>
    <div class="tankManag-Box3">
      <div class="Box3ItemZ">
        <div class="Box3ItemT">灌溉控制柜1号</div>
      </div>
      <div class="Box3ItemL">
        <div class="Box3ItemT">灌溉控制柜2号</div>
      </div>
      <div class="Box3ItemZ">
        <div class="Box3ItemT">灌溉控制柜3号</div>
      </div>
    </div>
    <div class="tankManag-Box4">
      <div class="Box4L">
        <Xialakuang :xialaList="xialaList" @belowEmits="belowEmits" />
      </div>
      <div class="Box4L">
        <Xialakuang :xialaList="xialaList" @belowEmits="belowEmits" />
      </div>
    </div>
    <div class="equipmentStatistics-box5">
      <div class="Box5Item" v-for="(item,index) in shebeiFkList" :key="index">
        <div class="box5L">{{ item.name }}</div>
        <div class="box5RA" v-if="item.isShow"></div>
        <div class="box5RB" v-if="!item.isShow"></div>
      </div>   
  </div>
</template>
<script setup>
import Xialakuang from "@/components/xialakuang.vue"
const xialaList = ref([
  {
    name: "全部",
    id: 1
  },
  {
    name: "一年级",
    id: 2
  },
  {
    name: "二年级",
    id: 3
  },
  {
    name: "三年级",
    id: 4
  },
  {
    name: "四年级",
    id: 5
  },
  {
    name: "五年级",
    id: 6
  }
])

const belowEmits = (e) => {
  console.log(e)
}
const shebeiFkList = ref([
  {
    name: "诱虫灯状态：",
    isShow: true
  },
  {
    name: "杀虫控制：",
    isShow: false
  },
  {
    name: "虫雨挡板：",
    isShow: true
  },
  {
    name: "烘干控制：",
    isShow: true
  },
  {
    name: "移虫控制：",
    isShow: false
  },
  {
    name: "杀虫挡板：",
    isShow: true
  },
  {
    name: "烘干挡板：",
    isShow: false
  },
  {
    name: "震动装置：",
    isShow: true
  },
  {
    name: "补光灯：",
    isShow: false
  },
  {
    name: "摄像头：",
    isShow: true
  },
  {
    name: "诱虫灯状态：",
    isShow: true
  },
  {
    name: "杀虫控制：",
    isShow: false
  },
  {
    name: "虫雨挡板：",
    isShow: true
  },
  {
    name: "烘干控制：",
    isShow: true
  },
  {
    name: "移虫控制：",
    isShow: false
  },
  {
    name: "杀虫挡板：",
    isShow: true
  },
  {
    name: "烘干挡板：",
    isShow: false
  },
  {
    name: "震动装置：",
    isShow: true
  },
  {
    name: "补光灯：",
    isShow: false
  },
  {
    name: "摄像头：",
    isShow: true
  },
  {
    name: "杀虫挡板：",
    isShow: true
  },
  {
    name: "烘干挡板：",
    isShow: false
  },
  {
    name: "震动装置：",
    isShow: true
  },
  {
    name: "补光灯：",
    isShow: false
  },
  {
    name: "摄像头：",
    isShow: true
  }
])
</script>
<style scoped lang="less">
.tankAreaManagement-box {
  background: url("@/assets/MaterialtankArea/XXC_SBGL_2@2x.png") no-repeat
    center;
  background-size: 100% 100%;
  background-color: rgba(15, 75, 63);
  position: relative;
  .tankManagTit1 {
    position: absolute;
    left: 30px;
    top: 1px;
  }
  .tankManagTit2 {
    position: absolute;
    left: 10px;
    top: 213px;
  }
  .tankManagTit3 {
    position: absolute;
    left: 30px;
    top: 347px;
  }

  .tankManag-Box1 {
    width: 320px;
    height: 148px;
    position: absolute;
    left: 70px;
    top: 47px;
    .Box1Item {
      margin-bottom: 1.1px;
      width: 320px;
      height: 36px;
      font-size: 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #fff;
      .Box1Item1 {
        width: 33%;
      }
      .Box1Item2 {
        width: 33%;
        color: #badedb;
      }
      .Box1Item3 {
        width: 33%;
        color: #badedb;
      }
      span {
        color: #fff;
      }
    }
  }
  .tankManag-Box2 {
    width: 380px;
    height: 78px;
    position: absolute;
    left: 10px;
    top: 242px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    .Box2Item {
      width: 183px;
      height: 32px;
      background: url("@/assets/MaterialtankArea/BJ_SZCS@2x.png") no-repeat
        center;
      background-size: 100% 100%;
      display: flex;
      .Box2ItemL {
        width: 75px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        font-size: 14px;
        color: #fff;
      }
      .Box2ItemR {
        width: 110px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        font-size: 14px;
        color: #fff;
      }
    }
  }
  .tankManag-Box3 {
    width: 380px;
    height: 48px;
    position: absolute;
    left: 10px;
    top: 392px;
    display: flex;
    justify-content: space-between;
    .Box3ItemZ {
      width: 122px;
      height: 48px;
      background: url("@/assets/MaterialtankArea/BJ_ZAIXIAN@2x.png") no-repeat
        center;
      background-size: 100% 100%;
    }
    .Box3ItemL {
      width: 122px;
      height: 48px;
      background: url("@/assets/MaterialtankArea/BJ_LIXIAN@2x.png") no-repeat
        center;
      background-size: 100% 100%;
    }
    .Box3ItemT {
      text-align: center;
      line-height: 30px;
      color: #fff;
      font-size: 14px;
    }
  }
  .tankManag-Box4 {
    width: 380px;
    height: 32px;
    position: absolute;
    left: 10px;
    top: 450px;
    display: flex;
    .Box4L {
      margin-right: 10px;
      width: 142px;
      height: 32px;
    }
  }
  .equipmentStatistics-box5 {
    width: 380px;
    height: 455px;
    position: absolute;
    left: 9px;
    top: 490px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    overflow-y: scroll;
    .Box5Item {
      margin-bottom: 8px;
      width: 185px;
      height: 38px;
      display: flex;
      color: #ffffff;
      align-items: center;
      background: url("@/assets/MaterialtankArea/BJ_KG@2x.png") no-repeat center;
      background-size: 100% 100%;
      .box5L {
        width: 50%;
        height: 100%;
        line-height: 38px;
        font-size: 14px;
        text-align: right;
      }
      .box5RA {
        cursor: pointer;
        margin-left: 5px;
        width: 56px;
        height: 24px;
        line-height: 38px;
        background: url("@/assets/MaterialtankArea/KG_K@2x.png") no-repeat
          center;
        background-size: 100% 100%;
      }
      .box5RB {
        margin-left: 5px;
        cursor: pointer;
        width: 56px;
        height: 24px;
        line-height: 38px;
        background: url("@/assets/MaterialtankArea/KG_G@2x.png") no-repeat
          center;
        background-size: 100% 100%;
      }
    }
  }
}
</style>
